<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var body = document.getElementsByTagName("body");
            console.log(body);  // HTMLCollection [body]

            /* 一、document.body
                在document中有一个属性body，它保存的是body的引用
            */
            
            body = document.body;
            console.log(body);  // \<body\>\</body\>，无语了直接写大于号和小于号会把它当成标签
            console.log(typeof body);  // object

            /* 二、docum.documentElement
                document.documentElement保存的是html根标签
            */

            var html = document.documentElement;
            console.log(html);  // object

            /* 三、document.all
                document.all代表页面中所有的元素
            */

            var all = document.all;
            console.log(all);
            console.log(all.length);
            console.log(typeof all);
            /* for(var i=0; i<all.length; i++){
                console.log(all[i]);
            } */

            // 另一种方法：
            var el = document.getElementsByTagName("*");
            console.log(el);
            console.log(el.length);

            /* 四、通过class名来查找
                document.getElementsByClassName():
                    根据元素的class属性值查询一组元素节点对象,
                    但是该方法不支持IE8及以下的浏览器

            */
            
            var box1 = document.getElementsByClassName("box1");
            console.log(box1);

            /* 五、比较万能的查询方法1：
                document.querySelector():
                    1. 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
                    2. 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
                    3. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
            */
            var box2 = document.querySelector("#box2");
            console.log(box2);

            var box4 = document.querySelector(".box3 #box4")
            console.log(box4);

            /* 六、比较万能的查询方法2：
                document.querySelectorAll()：
                    1. 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
                    2. 即使符合条件的元素只有一个，它也会返回数组
            */
            var box5 = document.querySelectorAll(".box5");
            console.log(box5);  // NodeList(2) [div.box5, div.box5]
            console.log(box5[0]);

            



        }
    </script>
</head>
<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <div class="box3">
        <div id="box4"></div>
    </div>
    <div class="box5"></div>
    <div class="box5"></div>
</body>
</html>